Element

您所在的位置:网站首页 vue tree组件 Element

Element

2023-10-16 03:56| 来源: 网络整理| 查看: 265

写项目时经常会遇到使用el-tree的场景,针对用过的,做个简单记录

一,先简单讲一下怎么安装element-ui:

1.安装:

npm i element-ui

2. 在main.js中引入样式以及组件:

import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)

3.丢个官网在这里,详细可以去查看:

Element - The world's most popular Vue UI framework

二,el-tree常见属性:

 data----用来展示数据

props----树状图配置

label---指定节点标签为节点对象的某个属性值

children---指定子树为节点对象的某个属性值

disabled---指定节点选择框是否禁用为节点对象的某个属性值

show-checkbox---显示选择框

getCheckedKeys----获取当前选中的节点的keys

default-expand-----all-默认展开

check-strictly----设置true,可以关闭父子关联

this.$refs.tree.setCheckedKeys([])-----清空当前的选择

三,如果已经获取到了数据,如何把它填充到el-tree中,让某些个复选框处于选中状态?

(在el-tree组件中通过setCheckedKeys方法 + node-key将数据 回显到el-tree)

1.给tree补充属性node-key:

2.调用setCheckedKeys:

async loadRoleDetail() { const res = await getRoleDetail(this.roleId) console.log('获取角色现有的权限', res.data.permIds) // 回填 + this.$refs.refTree.setCheckedKeys(res.data.permIds) },

(下次继续补充)



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3